<template>
	<!-- 登录模态框 -->
	<div>
		<div style="width: 100%;display: flex;justify-content: center;padding-top: 100px;padding-right: 20px;"><img
				class="top_left" src="../assets/logo-ielts.jpg" /></div>

		<div id="ieltsAiLoginWindow" style="padding: 0px;width: 400px;margin: 33px auto;">
			<div class="login_a" id="account-login" style="height: 480px;" v-if="state.showType==1">
				<div class="login_b">
					<div class="login_c">
						<div style="margin-bottom: 9px;font-size: 24px">登录</div>
						<div class="login_d"></div>
					</div>
					<div class="login_c2 login_pag" index="2" @click="showTypeChange(2)">注册</div>
					<div class="login_c1">没有账号?</div>
				</div>
				<div class="mt-tabpage" js-tab="3">
					<div class="mt-tabpage-title" style="cursor: pointer;">
						<a class="mt-tabpage-item" :class="{'mt-tabpage-item-cur':state.loginType==1}"
							@click="loginTypeChange(1)">密码登录
							<div class="login_f"></div>
						</a>
						<a class="mt-tabpage-item" :class="{'mt-tabpage-item-cur':state.loginType==2}"
							@click="loginTypeChange(2)">验证码登录
							<div class="login_f"></div>
						</a>
					</div>
					<div class="mt-tabpage-count" style="height: 297px;">
						<ul class="mt-tabpage-cont__wrap" style="display: flex; width: 860px; left: 0px;"
							:style="{'left':(state.loginType==1?'0px':'-430px')}">
							<li class="mt-tabpage-item" style="float: left;">
								<input type="text" name="loginName" id="loginName" class="inp_a" v-model="state.phone"
									placeholder="请输入您的账号" autocomplete="new-password">
								<input type="password" name="loginPass" id="loginPass" class="inp_a"
									v-model="state.password" placeholder="请输入您的密码" style="margin-top: 17px;"
									autocomplete="new-password">
								<div class="login_g">
									<div class="inp_c" @click="checkaccount()">
										<img src="../assets/login/gougou.png" v-if="state.isCheckaccount">
										<input type="hidden" name="remFlag3" id="remFlag3" value="1"
											autocomplete="new-password">
									</div>
									记住账号
									<div id="inp_c_autoLogin" class="inp_c" style="margin-left: 10px;"
										@click="checkLogin">
										<img src="../assets/login/gougou.png" v-if="state.isCheckLogin">
										<input type="hidden" name="autoLogin" id="autoLogin" value="1"
											autocomplete="new-password">
									</div>
									自动登录
									<div class="login_pag reset" index="3"
										style="margin-left: auto;font-size: 13px;cursor: pointer">重置密码
									</div>
								</div>
								<div style="margin-top: 32px;">
									<div id="login_error" class="login_g login_error" style="margin: 0px auto 6px;">
									</div>
									<div class="inp_btn loginBtn" @click="userValidaTions()" style="margin-top: 5px;">登录
									</div>
								</div>
							</li>
							<li class="mt-tabpage-item" style="float: left;">
								<input type="text" name="phone" id="phone" v-model="state.phone" class="inp_a"
									placeholder="请输入您的手机号码" autocomplete="new-password">
								<div style="width: 85%;display: inline-block;">
									<input type="text" name="code" id="code" v-model="state.code" class="inp_b"
										placeholder="请输入验证码" style="margin-top: 17px;" autocomplete="new-password">
									<button id="addSendCode" class="inp_d" @click="getCode(1)" :disabled="state.dis"
										style="margin-top: 12px;" autocomplete="new-password">
										<span v-if="!state.isSendCode">发送验证码</span>
										<span v-else>重新发送({{state.count}}s)</span>
									</button>
								</div>
								<div id="phone_error" class="login_g login_error"></div>
								<div class="inp_btn loginBtn" @click="login()">登录</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="login_a" id="register" style="height: 480px;" v-if="state.showType==2">
				<div class="login_b">
					<div class="login_c">
						<div style="margin-bottom: 9px;font-size: 24px">注册</div>
						<div class="login_d"></div>
					</div>
					<div class="login_c2 login_pag" index="0" @click="showTypeChange(1)">登录</div>
					<div class="login_c1">已有账号?</div>
				</div>
				<div style="text-align: center;">
					<input type="text" name="rg_phone" id="rg_phone" v-model="state.phone" class="inp_a"
						placeholder="请输入您的手机号码" style="margin-top: 28px;" autocomplete="new-password">
					<div style="width: 85%;display: inline-block;">
						<input type="text" name="rg_phone_code" v-model="state.code" id="rg_phone_code" class="inp_b"
							placeholder="请输入验证码" style="margin-top: 12px;" autocomplete="new-password">
						<button id="addSendCode" :class="{grey:isGrey,inp_d:!isGrey}" @click="getCode(1)"
							:disabled="state.dis" style="margin-top: 12px;" autocomplete="new-password">
							<span v-if="!state.isSendCode">发送验证码</span>
							<span v-else>重新发送({{state.count}}s)</span>
						</button>
					</div>
					<input type="password" name="rg_user_pass" v-model="state.password" id="rg_user_pass" class="inp_a"
						placeholder="请输入您的密码" maxlength="20" autocomplete="new-password">
					<input type="text" @blur="checkName()" name="rg_ename" id="rg_ename" class="inp_a"
						v-model="state.name" placeholder="请输入您的英文名方便外教认识你哦"
						onkeyup="value=value.replace(/[^a-zA-Z]/g,&#39;&#39;)" maxlength="20"
						autocomplete="new-password">
					<div class="login_g">
						<div class="inp_c" @click="checkAgreement">
							<img src="../assets/login/gougou.png" v-if="state.isCheckAgreement">
							<input type="hidden" name="xieYi" id="xieYi" value="0" autocomplete="new-password">
						</div>
						我已阅读并同意<span class="cursor" style="font-size: 13px;color: #4A89DC;"
							@click="readAgree()">《途鸭留学用户隐私协议》</span>
					</div>
					<div style="margin-top: 32px;">
						<div id="register_error" class="login_g login_error2" style="margin: -24px auto -10px;">
						</div>
						<div class="inp_btn" style="margin-top: 18px;" @click="postForm()">注册</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>
<script setup>
	import {
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const {
		proxy
	} = getCurrentInstance()
	const router = useRouter()
	const route = useRoute()
	const state = reactive({
		isCheckaccount: false,
		isCheckLogin: false,
		isCheckAgreement: false,
		showType: 1, //1登录 2注册
		loginType: 1, //1密码登录 2 验证码登录
		phone: '',
		code: '',
		password: '',
		name: '',
		isSendCode: false,
		count: '',
		timer: null,
		isGrey: false,
		dis: false
	})
	state.showType = route.query.showType

	function readAgree() {
		window.open('http://ielts.tuyaedu.com/privacyAgreement.html')
	}

	function checkAgreement() {
		state.isCheckAgreement = !state.isCheckAgreement
	}

	function checkaccount() {
		state.isCheckaccount = !state.isCheckaccount
	}

	function checkLogin() {
		state.isCheckLogin = !state.isCheckLogin
	}

	function userValidaTions() {
		proxy.$http.post('/boot/api/frontend/login', {
			password: state.password,
			username: state.phone
		}).then(res => {
			if (!res.data.success) {
				alert(res.data.message)
			} else {
				state.showType = 1
				localStorage.setItem('token', res.data.result.token)
				localStorage.setItem('userInfo', JSON.stringify(res.data.result.userInfo))
				router.push('/home/StudyCenter')
			}
		})
	}

	function postForm() {
		if (!state.isCheckAgreement) {
			alert('请先阅读并同意途鸭留学用户隐私协议！')
			return;
		}
		proxy.$http.post('/boot/api/frontend/register', {
			captcha: state.code,
			password: state.password,
			phoneNumber: state.phone,
			nickName: state.name
		}).then(res => {
			if (!res.data.success) {
				alert(res.data.message)
			} else {
				state.showType = 1
			}
		})
	}
	//检查名称
	function checkName() {
		proxy.$http.post('/boot/api/frontend/check', {
			username: state.name
		}).then(res => {
			console.log(res.data, '用户名检测')
			if (!res.data.success) {
				alert(res.data.message)
			}
		})
	}
	//登录
	function login() {
		if (state.loginType == 2) {
			proxy.$http.post('/boot/api/frontend/phoneLogin', {
				mobile: state.phone,
				captcha: state.code
			}).then(res => {
				if (!res.data.success) {
					alert(res.data.message)
				} else {
					localStorage.setItem('token', res.data.result.token)
					localStorage.setItem('userInfo', JSON.stringify(res.data.result.userInfo))
					router.push('/home/StudyCenter')
				}
			})
		}
	}
	//获取验证码
	function getCode(type) {
		if (!state.phone) {
			alert('请先输入手机号码')
			return;
		}
		let TIME_COUNT = 60;
		if (!state.timer) {
			state.count = TIME_COUNT;
			state.isGrey = true;
			state.isSendCode = true;
			state.dis = true;
			state.timer = setInterval(() => {
				if (state.count > 0 && state.count <= TIME_COUNT) {
					state.count--;
				} else {
					state.dis = false;
					state.isGrey = false;
					state.isSendCode = false;
					clearInterval(state.timer);
					state.timer = null;
				}
			}, 1000);
		}
		proxy.$http.post('/boot/api/frontend/sms', {
			mobile: state.phone,
			smsMode: type
		}).then(res => {
			if (!res.data.success) {
				alert(res.data.message)
			}
		})
	}

	function loginTypeChange(index) {
		state.loginType = index
		console.log('密码登录', state)
	}

	function showTypeChange(index) {
		state.showType = index
		state.dis = false;
		state.isGrey = false;
		state.isSendCode = false;
		clearInterval(state.timer);
		state.timer = null;
	}
</script>

<style lang="scss" scoped>
	.login_a {
		background: #ffffff;
		border-radius: 4px;
		width: 430px;
		height: 450px;
		float: right;
		box-shadow: 0px 0px 14px 0px rgb(232 238 245);
	}

	.login_b {
		padding: 6% 7% 0 7%;
		border-bottom: 1px solid #ccd1d9;
	}

	.login_c {
		font-size: 24px;
		color: #434a54;
		display: inline-block;
	}

	.login_c1 {
		float: right;
		font-size: 18px;
		color: #434a54;
		margin: 5px 10px 0 0;
	}

	.login_c2 {
		float: right;
		font-size: 18px;
		color: #ff4b40;
		margin: 5px 0 0 0;
		cursor: pointer;
	}

	.login_d {
		background: #ff4b40;
		border-radius: 4px;
		height: 5px;
		width: 100%;
		position: relative;
		top: 3px;
	}

	.login_f {
		border-radius: 3px;
		height: 3px;
		width: 23%;
		margin: auto;
	}

	.mt-tabpage-item-cur .login_f {
		background: #ff4b40;

	}

	.login_g {
		margin: 17px auto 0 auto;
		text-align: left;
		width: 85%;
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #666666;
	}

	.inp_a {
		background: #f5f7fa;
		border-radius: 6px;
		width: 85%;
		border: 0px;
		font-size: 15px;
		color: #434a54;
		margin-top: 11px;
		padding: 14px 15px;
	}

	.inp_b {
		background: #f5f7fa;
		border-radius: 6px 0 0 6px;
		width: 66%;
		border: 0px;
		font-size: 15px;
		color: #434a54;
		margin-top: 17px;
		padding: 14px 15px;
	}

	.inp_d {
		background: #ff4b40;
		color: white;
		width: 34%;
		font-size: 15px;
		margin-top: 17px;
		padding: 14px 0;
		float: right;
		text-align: center;
		border-radius: 0 6px 6px 0;
		cursor: pointer;
		border: 0;
	}

	.grey {
		background: #EDEEF1;
		color: white;
		width: 34%;
		font-size: 15px;
		margin-top: 17px;
		padding: 14px 0;
		float: right;
		text-align: center;
		border-radius: 0 6px 6px 0;
		cursor: pointer;
		border: 0;
	}

	.inp_c {
		border: 1px solid #ccd1d9;
		border-radius: 4px;
		height: 18px;
		width: 18px;
		display: inline-block;
		cursor: pointer;
		margin-right: 5px;
	}

	.inp_c img {
		margin-top: 4px;
		margin-left: 2px;
		margin-right: 16px;
		display: block;
		width: 75%;
	}

	.inp_btn {
		background: #ff4b40;
		border-radius: 6px;
		width: 85%;
		font-size: 20px;
		color: #ffffff;
		padding: 10px 0;
		display: inline-block;
		margin-top: 58px;
		cursor: pointer;
	}

	.wechat-tips {
		text-align: left;
		color: #b2b3b5;
		margin: 17px 31px;
		font-size: 15px;
	}

	.stu_account_div {
		text-align: left;
		padding: 10px 23px;
		background: #f5f7fa;
		border-radius: 6px;
		width: 98%;
		margin: 13px auto;
		box-shadow: rgb(197 196 196) 0px 3px 8px;
	}

	.stu_account_list {
		box-shadow: rgb(197 196 196) 0px 0px 3px;
		width: 90%;
		margin: auto;
		padding: 10px;
		border-radius: 5px;
		height: 60%;
		overflow: auto;
	}

	.login_error {
		color: red;
		font-size: 16px;
		margin-bottom: -35px;
	}

	.login_error2 {
		color: red;
		font-size: 15px;
		margin-bottom: -20px;
		margin-top: 6px;
	}

	.sweet-register {
		width: 470px;
	}
</style>